import draggable from "vuedraggable";
import { ComponentImp, LowCode } from "@/components/low-code/core";
import renderParse from "@/components/low-code/parse/index.vue";
import designer from "../designer/index.vue";
import { components as componentMapping } from "@/components/low-code/pc-library/index";

// 引入动画库
import "animate.css";
//引入字体图标
import "@/../public/iconfont/iconfont.css";

//代码高亮文件引入
import hljs from "highlight.js";
//样式文件,这里我选的是sublime样式，文件里面还有其他样式可供选择
import "highlight.js/styles/monokai-sublime.css";

import "@/components/low-code/style/index.css";

/****
 * 编辑器
 */
import "./ace/ace-builds";
import codeEditor from "../components/code-editor/index.vue";

type Params = { custom: { config: ComponentImp; widget: any; setting: any }[] };
const install = function (app: any, opts?: Params) {
  app.component("draggable", draggable);
  app.component("pageDesigner", designer);
  app.component("renderParse", renderParse);
  app.component("lowCodeEditor", codeEditor);

  app.directive(
    "highlight",
    function (el: { querySelectorAll: (arg0: string) => any }) {
      const blocks = el.querySelectorAll("pre code");
      blocks.forEach((block: HTMLElement) => {
        hljs.highlightBlock(block);
      });
    }
  );

  /****
   * 注册自定义组件
   */
  if (opts?.custom && opts?.custom.length > 0) {
    LowCode.custom = opts?.custom;
    console.log(opts.custom);
    opts.custom.map((item) => {
      componentMapping.set(item.config.component, {
        widget: item.widget,
        setting: item.setting,
      } as any);
    });
  }
};

export default install;
